<template>
	<div class="focusCompetition">
		<header>
			<img src="//activity-yb-1253410441.file.myqcloud.com/toptt.png">
		</header>
		<div class="swiper-container">
			<span v-if="selectIndex > 0" @click="changeIndex(-1)" class="prevBtn"></span>
			<Swiper 
				:height="height" 
				:show-dots="false"
				v-model="selectIndex">
					<SwiperItem v-for="(item,index) in arrayData" :key="index">
						<div class="swiper-item-content">
							<img :src="item.content" :alt="item.title">
						</div>
					</SwiperItem>
					
		    </Swiper>

		    <span v-if="selectIndex < 10" @click="changeIndex(1)" class="nextBtn"></span>
	    </div>
	</div>
</template>

<script>
	import {Swiper,SwiperItem} from 'vux'
	import {setTitle} from '../../utils/otherfn'

	const arrayData = [{
		title:'扎心了，老铁',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv1.png'
	},{
		title:'中超BIG4 期待再创辉煌',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv2.png'
	},{
		title:'为国足打CALL',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv3.png'
	},{
		title:'铿锵玫瑰 光荣绽放',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv4.png'
	},{
		title:'最高水平的赛事 谁主沉浮',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv5.png'
	},{
		title:'你必须GET到的小贴士',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv67.png'
	},{
		title:'U23国足再扬帆起航',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv8.png'
	},{
		title:'请开始你的表演',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv9.png'
	},{
		title:'我可能签了个假球星',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv10.png'
	},{
		title:'十二月',
		content:'//activity-yb-1253410441.file.myqcloud.com/bbv12.png'
	},]

	export default {
		components: {
		    Swiper,
		    SwiperItem
	    },
	    created(){
	    	setTitle('2018年竞彩焦点赛事展望');
	    },
	    data () {
	    	let month = new Date().getMonth();
	    	if(month >= 6){
	    		month = month -1;
	    	}

	    	if(month > 9){
	    		month = 9;
	    	}
	    	const year = new Date().getFullYear();

	    	if(year != 2018){
	    		month = 9;
	    	}

	    	return {
	    		selectIndex:month,
	    		arrayData:arrayData,
	    		height:window.innerWidth * 1509 / 750 + 'px'
	    	}
	    },

	    methods:{
	    	changeIndex(type){
	    		console.log(type);
	    		if(type < 0){
	    			this.selectIndex--;
	    		}
	    		if(type > 0){
	    			this.selectIndex++;
	    		}
	    	}
	    }
	}
</script>

<style lang="less" rel="stylesheet/less">
	@import "../app";
	
	.focusCompetition{
		width: 100%;
		// font-size: 0;
		background: url('//activity-yb-1253410441.file.myqcloud.com/bg.png') repeat-y;
		background-size: 100%;
		header{
			width: 100%;
			img{
				width: 100%;
			}
		}

		.swiper-container{
			// padding: 0 54px;
			background: url('//activity-yb-1253410441.file.myqcloud.com/bg2.png') repeat-y;
			background-size: 100%;
			position: relative;
			.prevBtn,.nextBtn{
				position: absolute;
				top:37px;
				height: 60px;
				width: 72px;
				z-index: 10;
			}
			.prevBtn{
				left: 90px;
				background: url('//activity-yb-1253410441.file.myqcloud.com/a1l.png') no-repeat center center;
				background-size: 100% 100%;
			}
			.nextBtn{
				right: 90px;
				background: url('//activity-yb-1253410441.file.myqcloud.com/a1r.png') no-repeat center center;
				background-size: 100% 100%;
			}
			.swiper-item-content{
				width: 100%;
				img{
					width: 100%;
				}
			}
		}
	}
</style>